<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="设置下拉选项" width="600px">
    <el-form ref="form" label-width="100px" :rules="rules" size="small">
      <el-form-item prop="showName" label="字段名称">
        {{column.showName}}
      </el-form-item>
      <!-- <el-form-item prop="name" label="报表名称">
        <el-input v-model="column.name" placeholder="请输入报表名称"/>
      </el-form-item> -->
      <el-form-item label="选项值类型">
        <el-select v-model="column.optionValueType" clearable placeholder="请选择选项值类型">
          <el-option v-if="[Object.keys(valueTypeList)[2], Object.keys(valueTypeList)[3]].indexOf(key) >= 0" v-for="(value, key) in valueTypeList" :key="key" :label="value" :value="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="选项值数据">
        <el-input type="textarea" :rows="2" v-model="column.optionValueData" placeholder="请输入选项值数据" />
      </el-form-item>
      <!-- <el-form-item label="关联字段">
        <el-input v-model="column.optionValueDataColumn" placeholder="请输入关联字段名"/>
      </el-form-item> -->
      <draggable
        :list="column.options"
        :animation="340"
        group="optionSelectItem"
        handle=".option-drag">
        <div v-for="(item, index) in column.options" :key="index" class="select-item">
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input v-model="item.value" placeholder="选项名" size="small" />
          <el-input
            placeholder="选项值"
            size="small"
            :value="item.key"
            @input="setOptionValue(item, $event)"
          />
          <div class="close-btn select-line-icon" @click="column.options.splice(index, 1)">
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="text-align: center;">
        <el-button
          style="padding-bottom: 0"
          icon="el-icon-circle-plus-outline"
          type="text"
          @click="addSelectItem"
        >
          添加选项
        </el-button>
      </div>
      <div style="margin-top: 20px; text-align: center;">
        <el-button class="filter-item" type="primary" title="保存" @click="handleSave">保存</el-button>
        <el-button class="filter-item" type="primary" plain title="取消" @click="visible=false">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>

import draggable from 'vuedraggable'
import enums from '@/views/workflow/utils/enum'
import { isNumberStr } from '@/views/workflow/utils/generator/index'

export default {
  components: { draggable },
  data() {
    return {
      visible: false,
      column: {
        showName: '',
        options: [],
        optionValueType: '',
        optionValueData: '',
        // optionValueDataColumn: ''
      },
      index: undefined,
      rules: {}
    }
  },
  computed: {
    valueTypeList() {
      return enums.VALUE_TYPE
    },
  },
  created() {
    
  },
  methods: {
    show(column, index) {
      this.index = index
      column.options = column.options || []
      column.optionValueType = column.optionValueType || ''
      column.optionValueData = column.optionValueData || ''
      // column.optionValueDataColumn = column.optionValueDataColumn || ''
      this.column = JSON.parse(JSON.stringify(column))
      this.visible = true
    },
    setOptionValue(item, val) {
      item.key = isNumberStr(val) ? +val : val
    },
    addSelectItem() { // 添加下拉选项
      this.column.options = this.column.options || []
      this.column.options.push({
        key: '',
        value: ''
      })
    },
    handleSave() {
      this.visible = false
      this.$emit('setFieldCallBack', this.column, this.index)
    }
  }
}
</script>

<style lang="scss" scoped>
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;
    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }
    & .el-input + .el-input {
      margin-left: 4px;
    }
  }
  .select-item + .select-item {
    margin-top: 4px;
  }
  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }
  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
    cursor: pointer;
  }
  .option-drag {
    cursor: move;
  }
</style>